﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.Master" AutoEventWireup="true" CodeBehind="SeriesTransition.aspx.cs" Inherits="ControlExplorer.C1PieChart.SeriesTransition" %>
<%@ Register Assembly="C1.Web.Wijmo.Controls.3" namespace="C1.Web.Wijmo.Controls.C1Chart" tagPrefix="wijmo" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
	<script type="text/javascript">
		function hintContent() {
		    return this.data.label + " : " + Globalize.format(this.value / this.total, "p2");
		   }

		   function changeProperties() {
			var animation = {};
			enabled = $("#chkEnabled").is(":checked"),
				duration = $("#inpDuration").val(),
				easing = $("#selEasing").val();
			animation.enabled = enabled;
			if (duration && duration.length) {
				animation.duration = parseFloat(duration);
			}
			animation.easing = easing;
			$("#<%= C1PieChart1.ClientID %>").c1piechart("option", "seriesTransition", animation);
		   }

		   function reload() {
			$("#<%= C1PieChart1.ClientID %>").c1piechart("option", "seriesList", createRandomSeriesList());
		   }

		   function createRandomSeriesList() {
			var seriesList = [],
				randomDataValuesCount = 6,
				labels = ["一月", "二月", "三月", "四月", "五月", "六月"],
				idx;
			for (idx = 0; idx < randomDataValuesCount; idx++) {
				seriesList.push({
					label: labels[idx],
					legendEntry: true,
					data: createRandomValue()
				});
			}
			return seriesList;
		   }

		   function createRandomValue() {
			var val = Math.round(Math.random() * 100);
			return val;
		   }
	</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
	<input type="button" value="重载" onclick="reload()" />
	<wijmo:C1PieChart runat="server" ID="C1PieChart1" Radius="140" Height="475" Width = "756" CssClass ="ui-widget ui-widget-content ui-corner-all">
		<Hint>
			<Content Function="hintContent" />
		</Hint>
		<SeriesList>
			<wijmo:PieChartSeries Label="一月" LegendEntry="true" Data="50" />
			<wijmo:PieChartSeries Label="二月" LegendEntry="true" Data="38" />
			<wijmo:PieChartSeries Label="三月" LegendEntry="true" Data="73" />
			<wijmo:PieChartSeries Label="四月" LegendEntry="true" Data="13" />
			<wijmo:PieChartSeries Label="五月" LegendEntry="true" Data="89" />
			<wijmo:PieChartSeries Label="六月" LegendEntry="true" Data="5" />
		</SeriesList>
		<Legend Visible="true"></Legend>
		<Footer Compass="South" Visible="False">
		</Footer>
		<Axis>
			<Y Visible="False" Compass="West">
				<Labels TextAlign="Center">
				</Labels>
				<GridMajor Visible="True">
				</GridMajor>
			</Y>
		</Axis>
	</wijmo:C1PieChart>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Description" runat="server">
   <p><strong>C1PieChart</strong> 控件支持一些下载数据时的动画效果。</p><br/>
	<p>
		<strong>SeriesTransition</strong>属性用来控制重新下载数据时的动画效果。
	</p>
	<ul>
		<li><strong>SeriesTransition.Enabled </strong>- 开启或关闭动画效果。</li>
		<li><strong>SeriesTransition.Duration </strong>- 设定动画的持续时间。 </li>
		<li><strong>SeriesTransition.Easing </strong>- 设定动画效果。 </li>
	</ul>
	<p> <strong>Easing</strong>属性有以下值：</p>
	<ul>
		<li>easeInCubic(">")</li>
		<li>easeOutCubic("<")</li>
		<li>easeInOutCubic("<>")</li>
		<li>easeInBack("backIn")</li>
		<li>easeOutBack("backOut")</li>
		<li>easeOutElastic("elastic")</li>
		<li>easeOutBounce("bounce")</li>
	</ul>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" runat="server">
	<div>
		<label for="chkEnabled">
			列值变换设置：启用
		</label>
		<input id="chkEnabled" type="checkbox" checked="checked" />
		<label for="inpDuration">
			时间
		</label>
		<input id="inpDuration" type="text" value="1000" />
		<label for="selEasing">
			缓和
		</label>
		<select id="selEasing">
			<option value=">">></option>
			<option value="<"><</option>
			<option value="<>"><></option>
			<option value="backIn">backIn</option>
			<option value="backOut">backOut</option>
			<option value="bounce">bounce</option>
			<option value="elastic">elastic</option>
		</select>
		<input type="button" value="应用" onclick="changeProperties()" />
	</div>
</asp:Content>
